<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分页</title>
		<style type="text/css">
			body{
				font-size: .85em;
				font-family: "Trebuchet MS", Verdana,Helvetica;
				color: #232323;
				background-color: #fff
			}
			#pageing a{
				background-color: #008844;
				border: 1px solid White;
				text-decoration: none;
				color: White;
				padding: .1em .6em .2em .6em;
			}
			
			#pageing a.selected{background-color: #AA7700;}
		</style>
	</head>
	<body>
		<h1>主机信息</h1>
		<table border="1px solid">
		{%if data%}
			{%for item in data %}
				<tr>
					<td>{{item.HostName}}</td>
					<td>{{item.IP}}</td>
				</tr>
			{%endfor%}
		{%endif%}
		</table>
		<div>总条数：{{count}}</div>
		<div id="pageing">
			{{page}}
		</div>
		<div>
			<select id="s1" onchange="changePageItem(this);">
				<option value="10">10</option>
				<option value="30">30</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="500">500</option>
			</select>
		</div>
		<script type="text/javascript" src="../../static/jquery/jquery-2.0.3.js"></script>
		<script type="text/javascript" src="../../static/jquery/jquery.cookie.js"></script>
		<script type="text/javascript">
			$(function(){
				var per_item=$.cookie("pager_num");
				if (per_item){
					$("#s1").val(per_item);
				} else {
					$.cookie("pager_num",10,{path:"/"})
				}
			})

		
			function changePageItem(arg){
				//创建或者修改Cookie值
				var value=$(arg).val();
				$.cookie("pager_num",value,{path:"/"});
				
			}
		</script>
	</body>
</html>